<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="main" style="width: 800px;height:500px;"></div>
    <script src="./lib/echarts.min.js"></script>
    <script>
        //1.) 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.querySelector('.main'))
        // 2.) 指定图表的配置项和数据  一定是对象格式
        let option = {
            //1. 标题组件
            title: {
                text: 'Stacked Area Chart'
            },
            // 2. 提示框组件
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            //3.  图例组件
            legend: {
                data: ['Email', 'Union Ads']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            //4.  直角坐标系内绘图网格
            // 网格配置（图表大小，可以调整图表的位置）
            grid: {
                left: '3%',
                right: '4%',
                bottom: 30,   //表示30px
                containLabel: true
            },
            //5.  x轴配置项
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
                    // 轴线设置
                    axisLine: {
                        lineStyle: {
                            type: 'dashed'
                        }
                    },
                    // axisLabel 坐标轴文字设置
                    axisLabel: {
                        color: 'red'
                    }
                }
            ],
            //6.  y轴配置项
            yAxis: [
                {
                    type: 'value'
                }
            ],
            //7. 系列数据（图表中使用的数据信息）
            series: [
                {
                    name: 'Email',   //表示
                    type: 'line',    //line表示折线图，bar表示柱状图
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [120, 132, 101, 134, 90, 230, 210]
                },
                {
                    name: 'Union Ads',
                    type: 'bar',   //表示柱状图
                    stack: 'Total',
                    areaStyle: {},
                    emphasis: {
                        focus: 'series'
                    },
                    data: [220, 182, 191, 234, 290, 330, 310]
                }
            ],
            //8.  颜色配置
            color: ['green', 'pink', 'blue'],  //分别代表三个线条的颜色

        }
        //3.) 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option)   //注意 setOption 第一个o是大写
    </script>
</body>

</html>